<template>
	<view class="evaluate">
		<view class="evaluate-order" v-if="orderInfo!=null">
			<view class="">
				<view class="evaluate-order-list" v-for="item in orderInfo.orderitem">
					<image :src="$utils.cdnImg(item.image)" mode="widthFix"></image>
					<view class="info">
						<view class="info-name">{{item.title}}</view>
						<view class="info-tag flex-row">
							<view v-for="tag in  item.tags">
								<text>{{tag.title}}</text> 
							</view>
							
							
						</view>
						<view class="info-price">
							<text>￥{{item.price}}</text>
							<text>x{{item.num}}</text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="pingxin flex-row flex-item-center">
			<view class="xinxin">选择评星：</view>
			<uni-rate :value="star" color="#bbb" :allowHalf="true" active-color="red" @change="onChange"/>
		</view>
		<view class="pingxin flex-row flex-item-center">
			<view class="xinxin">评价：</view>
			<radio-group name="pinlun" @change="changePj">
				<label v-for="(tag,index) in tags">
					<radio class="radios" :checked="index==0?true:false" :color="activeBackgroundColor_input" :value="tag.id" /><text class="radio-txt">{{tag.title}}</text>
				</label>
				
			</radio-group>
		</view>
		<view class="evaluate-from">
			<view class="textarea">
				<textarea placeholder='输入您的评价...' v-model="evaluate"  maxlength='200' />
				<view class="textlength">{{String(evaluate.length)}}/200</view>
			</view>
			<view class="imgs flex-row flex-wrap-no">
				<view class="add" v-if="imgList.length<3" @tap="upimg">
					<image src="@/static/img.png" mode="scaleToFill" ></image>
					<text>上传图片{{imgList.length}}/3</text>
				</view>
				<view class="img-list" v-for="(item,index) in imgList" :key="index">
					<image :src="$utils.cdnImg(item)" mode="scaleToFill"></image>
 					<image src="@/static/del.png" class="del" @tap="dleteImg(index)"></image>
				</view>
			</view>
		</view>
		
		<view class="evaluate-btn" @tap="pinglun">发布评价</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeBackgroundColor_input:"#50BC16",
				content_tag_ids:'',
				star:1,
				order_num:"",//订单号
				orderList:[0,0],
				evaluate:'',//评价
				imgList:[],
				orderInfo:null,//订单详情
				tags:[]
				// orderInfo:null
			};
		},
		onLoad(opt) {
			if(opt.order_num){
				this.order_num = opt.order_num
			}
			this.getOrderInfo();
			this.getTags();
		},
		methods:{
			//选择标签
			changePj(e){
				// console.log(e);
				this.content_tag_ids = e.detail.value
			},
			//获取标签
			getTags(){
				let that = this
				this.$api.getTags({
					type:2
				}).then(res=>{
					// console.log(res);
					if(res){
						that.tags = res;
					}
				})
			},
			//选择星星
			onChange(e){
				this.star = e.value
				// console.log(this.start);
			},
			//获取订单详情
			getOrderInfo(){
				let that = this;
				this.$api.getOrderInfo({
					order_num:this.order_num
				}).then(res=>{
					// console.log(res);
					that.orderInfo = res;
				})
			},
			//删除图片
			dleteImg(index){
				let newimgList = [];
				let imgList = this.imgList;
				if(imgList.length>0){
					imgList.forEach((item,ins)=>{
						if(ins!=index){
							newimgList.push(item)
						}
					})
				}
				this.imgList = newimgList
				// console.log(this.imgList);
			},
			//上传图片
			upimg(){
				let that = this;
				this.$utils.UploadImages("/api/common/upload",(res)=>{
					// console.log(res);
					if(res){
						res = JSON.parse(res)
						console.log(res);
						if(res.code==1){
							that.imgList.push(res.data.url)
							// console.log(that.imgList);
						}
					}
				})
			},
			//评论商品
			pinglun(){
				let orderInfo = this.orderInfo;
				if(!orderInfo){
					this.$utils.showMessage("请选择订单")
					return
				}
				let mumerchant_goods_ids = [];
				console.log(this.imgList);
				let data = {
					star:this.star,
					content_tag_ids:this.content_tag_ids,
					content:this.evaluate,
					images:this.imgList.join(','),
					order_num:this.order_num
				}
				let that = this;
				this.$api.commentOrder(data).then(res=>{
					that.$store.dispatch("getOrderList")
					that.$store.dispatch("getOrderStatus")
					that.$utils.showMessage("评论成功",()=>{
						uni.navigateBack();
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.radios{
		transform:scale(0.7);
		margin-left: 10rpx;
		
	}
	.radio-txt{
		font-size: 28rpx;
		color: #999999;
	}
	.pingxin{
		width: 690rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		
		.xinxin{
			font-size: 24rpx;
			margin-right: 50rpx;
			margin-left: 30rpx;
		}
	}
	.info-tag{
		>view{
			margin-right: 5rpx;
		}
	}
	.evaluate{
		padding: 30rpx;
		background: #F7F8FA;
		height: calc( 100vh - 108rpx);
		.evaluate-order{
			background: #FFFFFF;
			.evaluate-order-list{
				margin-bottom: 20rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding-left: 22rpx;
				padding-right: 22rpx;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				display: flex;
				image{
					width: 172rpx;
					height: 172rpx;
					// background: red;
					border-radius: 16rpx;
				}
				.info{
					flex: 1;
					margin-left: 20rpx;
					&-name{
						font-weight: bold;
						color: #333333;
						font-size: 28rpx;
					}
					&-tag{
						margin-top: 7rpx;
						text{ 
							padding-top: 2rpx;
							padding-bottom: 2rpx;
							padding-left: 10rpx;
							padding-right: 10rpx;
							font-size: 24rpx;
							color: #FF5000;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 1rpx solid #FF5000;
						}
					}
					&-price{
						margin-top: 40rpx;
						flex: 1;
						display: flex;
						justify-content: space-between;
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
					}
					&-price>text:nth-child(2){
						font-weight: 500;
					}
					
					
				}
			}
		}
		.evaluate-from{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 30rpx;
			.textarea{
				textarea{
					width: 100%;
					height: 250rpx !important;
				}
				.textlength{
					border-bottom: 1rpx solid #EFEFEF;
					padding-bottom: 20rpx;
					text-align: right;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			.imgs{
				padding-top: 40rpx;
				padding-bottom: 10rpx;
				.add{
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 180rpx;
					height: 180rpx;
					background: #F6F6F6;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					image{
						width: 38rpx;
						height: 31rpx;
					}
					text{
						margin-top: 22rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}
				.img-list{
					position: relative;
					image{
						width: 180rpx;
						height: 180rpx;
						background: #F6F6F6;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						margin-left: 10rpx;
					}
					.del{
						position: absolute;
						top: 0;
						right: 0;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		
		}
		.evaluate-btn{
			position: fixed;
			width: 400rpx;
			height: 90rpx;
			background: linear-gradient(90deg, #71DA38 0%, #50BC16 100%);
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			text-align: center;
			line-height: 90rpx;
			bottom: 74rpx;
			left: 145rpx;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>
